<template>
	<view class="comp-map">
		<view class="hd">玛法大陆</view>
		<view class="bd">
			<view class="select-map">
				<!-- <view :class="['item',item.name == current_map ? 'active' : '']" v-for="(item,index) in map" :key="item._id">
					{{item.name}}
				</view> -->
				
				<block v-for="(item,index) in map" :key="item._id">
					<view :class="['item',player.current_map == item.name ? 'active' : '']" @click="change_map(item)">{{item.name}}</view>
				</block>
				

				
			</view>
			<view class="section">
				<view class="boss-info">
					<view class="boss-nickname">{{boss.nickname}}</view>
					<view class="boss-face">
						<image class="face" :src="`../../static/monsters/${boss.resid}.png?1`" mode="heightFix"></image>
					</view>
					<view class="boss-attr">
						<view class="item"><view class="label">等级</view><view class="value">{{boss.lv}}</view></view>
						<view class="item"><view class="label">血量</view><view class="value">{{boss.hp}}</view></view>
						<view class="item"><view class="label">攻击</view><view class="value">{{boss.min_ac}}-{{boss.max_ac}}</view></view>
						<view class="item"><view class="label">防御</view><view class="value">{{boss.min_def}}-{{boss.max_def}}</view></view>
						<view class="item"><view class="label">速度</view><view class="value">{{boss.spd}}</view></view>
						<view class="item"><view class="label">暴击</view><view class="value">{{boss.crit}}%</view></view>
					</view>
					
					<view class="angry-value">
						<comp-progress :size="25" activeColor="#191b1f" :percent="angry_value / angry_value_max * 100"></comp-progress>
						<view class="text">愤怒值 {{angry_value}} / {{angry_value_max}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState} from "vuex";
	import compProgress from "@/components/comp-progress/comp-progress.vue"
	export default {
		name:"comp-map",
		components:{
			compProgress
		},
		computed : {
			...mapState(['mod_player','angry_value']),
			player(){
				return this.mod_player.player
			},
			boss(){
				return getApp().globalData['GAME_DATA']['boss'].find(item => item.nickname == getApp().globalData['GAME_DATA']['map'].find(item => item.name == this.player.current_map).boss)
			}
		},
		data() {
			return {
				map : getApp().globalData['GAME_DATA']['map'],
				angry_value_max : 0,
			};
		},
		created() {

			this.angry_value_max = Object.freeze(this.map.find(item => item.name == this.player.current_map).angry_value);
			
		},
		methods : {
			lock_message(map_data){
				uni.$emit('game-info',{
					content : `<span style="color:var(--color-yellow)">[提示]</span> <span style="color:var(--color-green)">${map_data.name}</span> 需要玩家等级到达 <span style="color:var(--color-red2)">${map_data.need_lv}</span> 级`
				})
			},
			change_map(map_data){
				getApp().globalData['battleEnd'] = true;
				getApp().globalData['angry_value'] = 0;
				this.$store.commit('commit_angry_value',0)
				this.$store.commit('mod_player/update_current_map_value',map_data.name);
				
				this.angry_value_max = Object.freeze(this.map.find(item => item.name == this.player.current_map).angry_value);
				
				uni.$emit('refreshBattle',{
					type : 'monster'
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.comp-map{
		flex:1;
		display: flex;
		flex-direction: column;
		.hd{
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1px solid #000;
			height:30px;
			box-sizing: border-box;
		}
		.bd{
			flex:1;
			background-color: $game-color-2;
			display: flex;
			.select-map{
				flex:1;
				display: grid;
				grid-template-columns: repeat(5,1fr);
				grid-gap:10px;
				padding:10px;
				.item{
					height:35px;
					border: 1px solid #000;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: $game-color-1;
					cursor: pointer;
					&.lock{
						cursor: not-allowed;
					}
					&.active{
						background-color: $game-color-3;
						position: relative;
						&::after{
						   content: '';
						   position: absolute;
						   top: 0;
						   right: 0;
						   height: 10px;
						   width: 10px;
						   background-color: var(--color-green);
						   clip-path: polygon(0 0, 100% 100%,100% 0);
						}
					}
					
				}
			}
			
			.map-info{
				border-left: 1px solid #000;
				width:250px;
			}
			
			.section{
				border-left: 1px solid #000;
				width:260px;
				display: flex;
				flex-direction: column;
				// .battle-count{
				// 	border-bottom: 1px solid #000;
				// 	height:80px;
				// }
				
				
				.boss-info{
					display: flex;
					flex-direction: column;
					flex:1;
					.boss-nickname{
						color:var(--color-green);
						font-weight: bold;
						border-bottom: 1px solid #000;
						display: flex;
						justify-content: center;
						align-items: center;
						height:30px;
					}
					.boss-face{
						flex:1;
						display: flex;
						align-items: center;
						justify-content: center;
						border-bottom: 1px solid #000;
						
						.face{
							height:100%;
							max-height: 180px;
						}
					}
					.boss-attr{
						.item{
							display: flex;
							border-bottom: 1px solid #000;
							box-sizing: border-box;
							height:30px;
							.label{
								width:80px;
								border-right: 1px solid #000;
								display: flex;
								justify-content: center;
								align-items: center;
							}
							.value{
								flex:1;
								display: flex;
								align-items: center;
								padding-left:10px;
							}
						}
					}
					
					.angry-value{
						overflow: hidden;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						overflow: hidden;
						.text{
							color:#abb2bf;
							transform-origin:bottom center;
							position: absolute;
							font-size:12px;
							color:var(--color-green)
						}
					}
					
					.battle{
						padding:10px;
						text-align: center;
						
						color:var(--color-green);
						cursor: pointer;
						&:hover{
							color:var(--color-red2);
						}
					}
				}
				
				
				
				// .boss-face{
				// 	display: flex;
				// 	border-bottom: 1px solid #000;
				// 	flex-direction: column;
				// 	align-items: center;
				// 	box-sizing: border-box;
				// 	flex:1;
				// 	.nickname{
				// 		color:var(--color-green);
				// 		font-weight: bold;
				// 		border-bottom: 1px solid #000;
				// 		background-color: $game-color-3;
				// 		display: flex;
				// 		justify-content: center;
				// 		align-items: center;
				// 		height:30px;
				// 		width:100%;
				// 	}
				// 	.ico{
				// 		height:180px;
				// 	}
				// 	.challenge{
				// 		border: 1px solid #000;
				// 		color:var(--color-green);
				// 		padding:2px;
				// 	}
				// }
				// .boss-info{
				// 	display: flex;
				// 	flex-direction: column;
				// 	.item{
				// 		display: flex;
				// 		border-bottom: 1px solid #000;
				// 		box-sizing: border-box;
				// 		height:30px;
				// 		.label{
				// 			width:80px;
				// 			border-right: 1px solid #000;
				// 			display: flex;
				// 			justify-content: center;
				// 			align-items: center;
				// 		}
				// 		.value{
				// 			flex:1;
				// 			display: flex;
				// 			align-items: center;
				// 			padding-left:10px;
				// 		}
				// 	}
				// }
			}
			
			
			
		}
	}
</style>